<template>
  <q-dialog v-model="cronTableVisible" position="top">
    <q-card style="width: 800px; max-width: 80vw;">
      <q-card-section class="text-h6">
        生成Cron表达式
      </q-card-section>
      <q-separator/>
      <q-card-section>
        <q-markup-table bordered dense flat separator="cell">
          <thead>
          <tr>
            <th>秒</th>
            <th>分钟</th>
            <th>小时</th>
            <th>日</th>
            <th>月</th>
            <th>周</th>
            <th>年</th>
            <th>Cron表达式</th>
          </tr>
          </thead>
          <tbody>
          <td>{{secondItem}}</td>
          <td>{{minuteItem}}</td>
          <td>{{hourItem}}</td>
          <td>{{dayItem}}</td>
          <td>{{monthItem}}</td>
          <td>{{weekItem}}</td>
          <td>{{yearItem}}</td>
          <td>{{expressItem}}</td>
          </tbody>
        </q-markup-table>
      </q-card-section>
      <q-separator/>
      <q-card-section style="width: 800px; max-width: 80vw;">
        <q-tabs v-model="tab">
          <q-tab name="seconds" label="秒"/>
          <q-tab name="minutes" label="分钟"/>
          <q-tab name="hours" label="小时"/>
          <q-tab name="days" label="日"/>
          <q-tab name="months" label="月"/>
          <q-tab name="weeks" label="周"/>
          <q-tab name="years" label="年"/>
        </q-tabs>
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="seconds">
            <second @handleFinish="fillSecond" :initData="secondValue"></second>
          </q-tab-panel>
          <q-tab-panel name="minutes">
            <minute @handleFinish="fillMinute" :initData="minuteValue"></minute>
          </q-tab-panel>
          <q-tab-panel name="hours">
            <hour  @handleFinish="fillHour" :initData="hourValue"></hour>
          </q-tab-panel>
          <q-tab-panel name="days">
            <day  @handleFinish="fillDay" :initData="dayValue"></day>
          </q-tab-panel>
          <q-tab-panel name="months">
            <month  @handleFinish="fillMonth" :initData="monthValue"></month>
          </q-tab-panel>
          <q-tab-panel name="weeks">
            <week  @handleFinish="fillWeek" :initData="weekValue"></week>
          </q-tab-panel>
          <q-tab-panel name="years">
            <year  @handleFinish="fillYear" :initData="yearValue"></year>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat :label="$t('Confirm')" color="primary" @click="createCronStr" />
        <q-btn flat :label="$t('Close')" @click="closeCreateCron"/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import {computed, ref, onMounted, toRefs, watch, nextTick} from 'vue'
import second from './second.vue'
import minute from './minute.vue'
import hour from './hour.vue'
import day from './day.vue'
import month from './month.vue'
import week from './week.vue'
import year from './year.vue'
const props = defineProps({
  show: {
    type: Boolean,
    required: false,
  },
  initData:{
    type: String,
    required: false
  }
})
const {show,initData} = toRefs(props)
watch(() => show.value, () => {
  if(show.value) {
    showCreateCron()
  }else{
    cronTableVisible.value = false
  }
})
watch(()=>initData.value,()=>{
    if(initData.value){
      let values = initData.value.split(" ")
      secondValue.value = values[0]
      minuteValue.value = values[1]
      hourValue.value = values[2]
      dayValue.value = values[3]
      monthValue.value = values[4]
      weekValue.value = values[5]
      yearValue.value = values[6]
      secondItem.value = values[0]
      minuteItem.value = values[1]
      hourItem.value = values[2]
      dayItem.value = values[3]
      monthItem.value = values[4]
      weekItem.value = values[5]
      yearItem.value = values[6]
    }else{
      secondValue.value = ''
      minuteValue.value = ''
      hourValue.value = ''
      dayValue.value = ''
      monthValue.value = ''
      weekValue.value = ''
      yearValue.value = ''
    }
})
const emit = defineEmits(['close','getCron'])
const cronTableVisible = ref(false)
const tab = ref('seconds')
const secondItem = ref('*')
const minuteItem = ref('*')
const hourItem = ref('*')
const dayItem = ref('?')
const monthItem = ref('*')
const weekItem = ref('?')
const yearItem = ref('*')
const secondValue = ref('')
const minuteValue = ref('')
const hourValue = ref('')
const dayValue = ref('')
const monthValue = ref('')
const weekValue = ref('')
const yearValue = ref('')
const expressItem = computed(()=>{
  let express = new Array()
  express.push(secondItem.value)
  express.push(minuteItem.value)
  express.push(hourItem.value)
  express.push(dayItem.value)
  express.push(monthItem.value)
  express.push(weekItem.value)
  express.push(yearItem.value)
  return express.join(" ")
})
const fillSecond = function (val){
  secondItem.value = val
  secondValue.value = val
}
const fillMinute = function (val){
  minuteItem.value = val
  minuteValue.value = val
}
const fillHour = function (val){
  hourItem.value = val
  hourValue.value = val
}
const fillDay = function (val){
  dayItem.value = val
  if(dayItem.value!='?' && weekItem.value != '?'){
    weekItem.value = '?'
    weekValue.value = '?'
  }
}
const fillMonth = function (val){
  monthItem.value = val
  monthValue.value = val
}
const fillWeek = function (val){
  weekItem.value = val
  if(dayItem.value!='?' && weekItem.value != '?'){
    dayItem.value = '?'
    dayValue.value = '?'
  }
}
const fillYear = function (val){
  yearItem.value = val
  yearValue.value = val
}
const showCreateCron = function () {
  cronTableVisible.value = true
}
const closeCreateCron = function () {
  emit('close')
}
const createCronStr = function (){
  emit('getCron',expressItem.value)
  closeCreateCron()
}
</script>

<style scoped>

</style>
